import { useWaterIntake } from '@/contexts/WaterIntakeContext';
import { ProgressRing } from '@/components/ProgressRing';
import { RecordWaterModal } from '@/components/RecordWaterModal';
import { GoalSettingModal } from '@/components/GoalSettingModal';
import { WaterRecordsList } from '@/components/WaterRecordsList';

export default function Home() {
  const { 
    dailyGoal, 
    totalIntake, 
    goalProgress, 
    setShowRecordModal,
    setShowGoalModal
  } = useWaterIntake();

  // 计算剩余水量
  const remaining = Math.max(0, dailyGoal - totalIntake);

  return (
    <div className="min-h-screen bg-gray-50 p-4">
      {/* 顶部标题栏 */}
      <div className="text-center mb-8 pt-6">
        <h1 className="text-2xl font-bold text-gray-800">每日喝水</h1>
        <p className="text-gray-500 mt-1">记录您的日常水分摄入</p>
      </div>

      {/* 主要内容区 */}
      <div className="bg-white rounded-2xl shadow-sm p-6 mb-6">
        {/* 进度圆环 */}
        <div className="flex justify-center mb-6">
          <ProgressRing progress={goalProgress} size={220} strokeWidth={14} />
        </div>
        
        {/* 目标和进度信息 */}
        <div className="grid grid-cols-2 gap-4 text-center">
          <div className="bg-blue-50 rounded-xl p-4">
            <p className="text-sm text-gray-500 mb-1">今日已喝</p>
            <p className="text-2xl font-bold text-blue-600">{totalIntake}ml</p>
          </div>
          <div className="bg-green-50 rounded-xl p-4">
            <p className="text-sm text-gray-500 mb-1">目标</p>
            <p className="text-2xl font-bold text-green-600">{dailyGoal}ml</p>
          </div>
        </div>
        
        {/* 进度条 */}
        <div className="mt-6">
          <div className="flex justify-between text-sm mb-2">
            <span className="text-gray-600">进度</span>
            <span className="font-medium">{totalIntake}/{dailyGoal}ml</span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2.5">
            <div 
              className="bg-blue-600 h-2.5 rounded-full transition-all duration-500 ease-out"
              style={{ width: `${goalProgress}%` }}
            ></div>
          </div>
          
          {/* 剩余水量提示 */}
          {remaining > 0 && (
            <p className="text-sm text-gray-500 mt-2 text-center">
              还需饮用 {remaining}ml 达到今日目标
            </p>
          )}
          
          {remaining === 0 && (
            <p className="text-sm text-green-500 mt-2 text-center font-medium">
              <i class="fa-solid fa-trophy mr-1"></i> 恭喜！已完成今日喝水目标
            </p>
          )}
        </div>
      </div>

      {/* 操作按钮 */}
      <div className="grid grid-cols-2 gap-4 mb-8">
        <button
          onClick={() => setShowGoalModal(true)}
          className="bg-white border border-gray-300 rounded-xl py-4 flex flex-col items-center justify-center shadow-sm hover:shadow-md transition-shadow"
        >
          <i class="fa-solid fa-bullseye text-2xl text-gray-600 mb-2"></i>
          <span className="font-medium text-gray-800">设置目标</span>
        </button>
        
        <button
          onClick={() => setShowRecordModal(true)}
          className="bg-blue-600 text-white rounded-xl py-4 flex flex-col items-center justify-center shadow-lg hover:bg-blue-700 transition-colors hover:shadow-xl"
        >
          <i class="fa-solid fa-plus-circle text-2xl mb-2"></i>
          <span className="font-medium">记录喝水</span>
        </button>
      </div>

      {/* 记录列表 */}
      <WaterRecordsList />

      {/* 模态框 */}
      <RecordWaterModal />
      <GoalSettingModal />
    </div>
  );
}